<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论列表</title>
    <%- include common %>
</head>

<body>
    <%- include("head",{title:"mlist",username})%>
    <div class="container container-fluid">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-12">
                <h2 class="text-danger  text-left">评论列表</h2>
                <div class="row col-md-3 col-sm-3 col-lg-3" style="margin:10px 0px">
                    <select class="form-control " id="select" data-page="<%- page %>">
                        <option value="5" <%-pageSize==5 ?'selected':'' %>>每页5条</option>
                        <option value="10" <%-pageSize==10 ?'selected':'' %>>每页10条</option>
                        <option value="20" <%-pageSize==20 ?'selected':'' %>>每页20条</option>
                        <option value="40" <%-pageSize==40 ?'selected':'' %>>每页40条</option>
                    </select>
                </div>
                <table class="table table-bordered table-hover table-striped" style="width:100%;">
                    <thead>
                        <tr class="text-center text-danger">
                            <td>序号</td>
                            <td>评论人</td>
                            <td>评论标题</td>
                            <td>评论内容</td>
                            <td>电影名称</td>
                            <td>评论电影</td>
                            <td>时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <%  if(result.length>0){  %>
                        <%    result.map((item,idx)=>{  %>
                        <tr class="text-center">
                            <td><%- idx+1 %></td>
                            <td>
                                <a href="/comment/my?author=<%- item.author %>">
                                    <%- item.author %> <span
                                        class="text-danger"><%- username == item.author ? '楼主':'' %> </span>
                                </a>
                            </td>
                            <td style="width:120px;word-break: break-all;">
                                <a href="/comment/detail?_id=<%- item._id %>">
                                    <%- item.title %>
                                </a>
                            </td>
                            <td style="width:300px;word-break: break-all;"><%- item.content %></td>
                            <td><%- item.movie.title %></td>
                            <td>
                                <a href="/comment/moviepin?mid=<%-item.mid%>">
                                    <img width="80px" height="80px"
                                        src="<%- item.movie.images.large.replace(/img7/,'img3')%>" alt=""></a></td>
                            <td><%- item.time %></td>
                            <td style="width:240px;">
                                <button class="aaa btn btn-success" data-item='<%- JSON.stringify(item) %>'
                                    data-toggle="modal" data-target="#chabox">查看回复</button>
                                <%    if(username==item.author){  %>
                                <button class="btn btn-info" onclick="window.location.href='/comment/update?_id=<%- item._id %>'">修改</button>
                                <button class="btn btn-danger" onclick="getDelId('<%- item._id %>')" data-toggle="modal"
                                    data-target="#delbox">删除</button>
                                <%    }   %>

                            </td>
                        </tr>
                        <%    })  %>
                        <tr>
                            <td colspan="8">
                                <button class=" disabled btn btn-danger pull-right">删除所有</button>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li>
                                            <a href="/comment/mlist?page=<%-page - 1 %>&pageSize=<%- pageSize%>"
                                                aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page -2  %>&pageSize=<%- pageSize%>"><%- page-2  %></a>
                                        </li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page -1  %>&pageSize=<%- pageSize%>"><%- page-1 %></a>
                                        </li>
                                        <li class="active "><a
                                                href="/comment/mlist?page=<%-page%>&pageSize=<%- pageSize%>">
                                                <%- page %></a></li>
                                        <li><a
                                                href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"><%- page + 1 %></a>
                                        </li>
                                        <li><a href="/comment/mlist?page=<%-page + 2 %>&pageSize=<%- pageSize%>"><%- page + 2 %>
                                            </a></li>
                                        <li>
                                            <a href="/comment/mlist?page=<%-page + 1 %>&pageSize=<%- pageSize%>"
                                                aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </td>
                            <td colspan="3">
                                <div class="pull-right" style="display:flex">
                                    <p>第 <%- page %> 页 / 每页 <%- pageSize %> 条</p>
                                    <p>---</p>
                                    <p>总 <%- total %> 条 / 共 <%- totalPage %> 页</p>

                                </div>
                            </td>
                        </tr>
                        <%    }else{  %>
                        <tr>
                            <td colspan="8" class="text-success">
                                暂无数据,请马上添加评论
                            </td>
                        </tr>
                        <%   }  %>
                    </tbody>
                </table>
            </div>
            <!-- 此处是点击删除时的弹出框 -->
            <div class="modal fade" tabindex="-1" role="dialog" id="delbox">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">删除评论</h4>
                        </div>
                        <div class="modal-body">
                            <p>你确定要删除这条评论吗?</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-danger" onclick="delsubmit()">确定删除</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
        </div>
        <!-- 此处是点击查看评论的弹出框 -->
        <div class="modal fade" tabindex="-1" role="dialog" id="chabox">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">热门回复</h4>
                    </div>
                    <div class="modal-body" id="answerlist">

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="gotodetail" class="btn btn-default" data-dismiss="modal">添加回复</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
        <%- include foot %>
        <script>
            //下拉菜单更改页面渲染个数
            $("#select").on("change", function () {
                console.log($(this).val())
                var page = $(this).attr("data-page");
                var pageSize = $(this).val();
                window.location.href = "/comment/mlist?page=" + page + "&pageSize=" + pageSize;
            })

            //用弹窗针对此电影评价和其回复的渲染
            // function showThisAnswer(that){
            //     var item = JSON.stringify($(that).attr('data-item'));
            //     $
            // }
            //删除按钮
            var _id = null;
            function getDelId(sss) {
                _id = sss;
            }
            function delsubmit() {
                $.ajax({
                    url: "/comment/delsubmit",
                    method: "POST",
                    data: {
                        _id
                    },
                    success: res => {
                        console.log(res);
                        if (res.code == 200) {
                            alert(res.msg);
                            window.location.reload();
                        }
                    }
                })
            }
            //查看评论回复
            $('.aaa').click(function () {
                var obj = JSON.parse($(this).attr('data-item'));
                console.log(obj._id);
                $("#gotodetail").attr("data-id",obj._id);
                var html = '';
                obj.answer.forEach(item => {
                    html += `
                    <div style="display: flex;justify-content: space-between;">
                                <p class=" text-warning"> #  ${item.id+1} </p>
                                <p> 来自:${item.author ? item.author : '佚名'}</p>
                            </div>
                            <div style="display: flex;justify-content: space-between;border-bottom:1px dashed red;padding-bottom:5px">
                                <p class=" text-danger"> 内容 :${item.subtitle}</p>
                                <p class=" text-warning"> 时间 :${item.time}</p>
                            </div>
                    `
                })
                $('#answerlist').html(html);
            })
            //查看评论回复中的添加按钮
            $("#gotodetail").click(function(){
                window.location.href = "/comment/detail?_id="+$(this).attr("data-id")
            })
        </script>
</body>

</html>